<!--
 * @Author: your name
 * @Date: 2021-01-10 12:54:33
 * @LastEditTime: 2021-01-12 20:37:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shopping\src\pages\goods_detail\main.vue
-->

<template>
  <view class="container">
    <!-- 返回按钮 -->
    <navigator open-type="navigateBack" class="back_button" hover-class="none">
      <text>返回</text>
    </navigator>

    <!-- 轮播图 -->
    <swiper
      class="swiper"
      indicator-color="background: rgba(0,0,0,0.40)"
      indicator-active-color="#ea4350"
      indicator-dots="true"
      autoplay="true"
      interval="3000"
      circular="true"
    >
      <swiper-item
        class="swiper_item"
        v-for="(item, index) in pics"
        :key="item.pics_id"
      >
        <image
          class="swiper_item_iamge"
          :src="item.pics_big_url"
          mode="aspectFit"
          @tap="previewImage(index)"
        />
      </swiper-item>
    </swiper>

    <!-- 商品内容 -->
    <view class="goods_info">
      <view class="goods_head">
        <view class="price">{{ goods_price }}</view>
        <view class="iconfont icon-zhuanfa open_type_button_container">
          <button open-type="share" class="open_type_button"></button>
        </view>
        <view @tap="collectHandle" class="iconfont icon-shoucang1"></view>
      </view>
      <view class="goods_name">
        <text user-select>{{ goods_name }}</text>
      </view>
    </view>
    <view class="divder"></view>

    <!-- 商品详情 -->
    <view class="goods_detail">
      <view class="title">图文详情</view>
      <rich-text :nodes="goods_introduce"></rich-text>
    </view>

    <!-- 底部布局 -->
    <view class="bottom">
      <view class="bottom_item open_type_button_container">
        <button open-type="contact" class="open_type_button"></button>
        <view class="iconfont icon-kefu"></view>
        <text class="icon_text">客服</text>
      </view>
      <navigator
        hover-class="none"
        open-type="switchTab"
        class="bottom_item"
        url="/pages/cart/main"
      >
        <view class="cart_count" v-if="cartList.length">{{cartList.length}}</view>
        <view class="iconfont icon-gouwuche"></view>
        <text class="icon_text">购物车</text>
      </navigator>
      <view class="bottom_item">
        <view class="bottom_btn" @tap="addCartHandle">加入购物车</view>
      </view>
      <view class="bottom_item">
        <view class="bottom_btn">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getGoodsDetail } from "@/api";
export default {
  data() {
    return {
      pics: [],
      goods_id: "",
      goods_introduce: "",
      goods_name: "",
      goods_price: 0,
      goods_small_logo: "",
      cartList:[],
    };
  },
  onLoad({ goods_id }) {
    this.goods_id = goods_id;
    this.getGoodsDetail();
    this.cartList=uni.getStorageSync('cartList') || [];
  },
  watch:{
    cartList:{
      deep:true,
      handler:(val)=>{
        console.log(val);
        uni.setStorageSync('cartList', val)
      }
    }
  },
  methods: {
    async getGoodsDetail() {
      const res = await getGoodsDetail({ goods_id: this.goods_id });
      // 按需绑定数据，减少内存消耗
      let {
        pics,
        goods_introduce,
        goods_name,
        goods_price,
        goods_small_logo,
      } = res.data.message;
      console.log(res);
      this.pics = pics;

      // 获取系统信息
      const { system } = uni.getSystemInfoSync();

      //将系统信息统一转为小写,然后调用includes()函数查看是否包含ios，返回布尔值
      const isIOS = system.toLowerCase().includes("ios");
      console.log(isIOS);
      if (isIOS) {
        goods_introduce = goods_introduce.replace(/\.webp/g, ".jpg");
      }

      // 通过正则表达式，给img添加类名，解决图片空隙问题
      this.goods_introduce = goods_introduce.replace(
        /<img/g,
        "<img class='rich_img'"
      );
      this.goods_name = goods_name;
      this.goods_price = goods_price;
      this.goods_small_logo = goods_small_logo;
    },
    // 预览大图
    previewImage(current) {
      // 将pics里的图片映射出来
      const urls = this.pics.map((item) => item.pics_big_url);

      // 由于api的uils参数格式是字符串，需要转换数据
      uni.previewImage({
        urls,
        current,
      });
    },
    // 收藏按钮事件
    collectHandle() {
      uni.showToast({
        title: "此功能正在开发中！",
        icon: "none",
        // 延迟（消失）时间
        duration: 1000,
      });
    },
    // 加入购物车按钮事件
    addCartHandle() {
      const cartList=uni.getStorageSync('cartList')||[]
      // 通过findIndex遍历查找这个商品是否之前已经加入购物车中   查找成功返回索引值  失败返回-1
      const index = cartList.findIndex(
        (item) => item.goods_id === this.goods_id
      );
      // 情况1，是新的商品加入购物车
      if (index === -1) {
        cartList.push({
          goods_id: this.goods_id,
          goods_name: this.goods_name,
          goods_price: this.goods_price,
          goods_small_logo: this.goods_small_logo,
          goods_count: 1,
          goods_selected: true,
        });
      } else {
        // 情况2，之前在购物车存储的商品，让购买数量++
        cartList[index].goods_count++;
      }

      uni.setStorageSync("cartList", cartList);
      this.cartList=cartList

      uni.showToast({
        title: "加入成功!",
        duration: 1000,
        mask: true,
      });
    },
  },
};
</script>

<style lang="less" >
.container {
  padding-top: 65rpx;
}
// 返回按钮
.back_button {
  position: fixed;
  left: 40rpx;
  top: 80rpx;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 30rpx;
  width: 120rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 30rpx;
}
.bottom {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 96rpx;
  width: 100%;
  background-color: #fff;
  padding: 0 20rpx;
  .bottom_item {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .iconfont {
      font-size: 44rpx;
    }
    .cart_count{
      position: absolute;
      left:35rpx;
      top: -5rpx;
      color: #fff;
      width: 30rpx;
      height: 30rpx;
      text-align: center;
      border-radius: 50%;
      font-size: 20rpx;
      background-color:var(--mainColor);
    }

    .icon_text {
      font-size: 20rpx;
    }
    &:last-child .bottom_btn {
      background-color: var(--mainColor);
    }
  }
  .bottom_btn {
    width: 196rpx;
    height: 60rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 26rpx;
    background-color: #faaa21;
  }
}

// 富文本样式
.rich_img {
  vertical-align: top;
}
.swiper,
.swiper_item,
.swiper_item_iamge {
  width: 750rpx;
  height: 750rpx;
}

.goods_info {
  padding: 20rpx;
  .goods_head {
    display: flex;
    .price {
      flex: 1;
      font-size: 40rpx;
    }

    .iconfont {
      font-size: 40rpx;
      margin-left: 20rpx;
      color: #666;
    }
  }

  .goods_name {
    font-size: 30rpx;
    margin-top: 20rpx;
    line-height: 1.5;
  }
}

.goods_detail {
  .title {
    display: flex;
    justify-content: center;
    padding: 20rpx;
    font-weight: 700;
  }
}
</style>